<?php
    $this->headTitle($this->site_name.' - Client Home');
?>

<script type="text/javascript" src="/js/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.draggable.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.droppable.min.js"></script>
<script type="text/javascript" src="/js/ui/jquery.ui.sortable.min.js"></script>

<style>
	.draggable1, .draggable2 { cursor:pointer;}
	.sortable { list-style-type: none; margin: 0; padding: 0;  }
	.sortable li { margin: 0 3px 3px 3px;  }
	.sortable li a { position: absolute;  }
	.show {display:block;}
	.hide {display:none;}
	
</style>

<script>
<?php
	echo "var user_name='".$this->user_name."';";
	echo "var user_id='".$this->user_id."';";
	echo "var services=new Array();\n";
	echo "var departments=new Array();\n";
	echo "var serviceurl=new Array();\n";
	echo "var servicetype=new Array();\n";
	echo "var servicearea=new Array();\n";
	echo "var serviceicon=new Array();\n";
	$all_services = $this->all_services;
	foreach ($all_services as $key => $value){
		echo "services['".$value['icon']."']='".$value['dpt_name']."';\n";
		echo "departments['".$value['icon']."']='".$value['dpt_id']."';\n";
		echo "serviceurl['".$value['icon']."']='".$value['service_url']."';\n";
		echo "servicetype['".$value['icon']."']='".$value['service_type']."';\n";
		echo "servicearea['".$value['icon']."']='".$value['area']."';\n";
		echo "serviceicon['".$value['dpt_id']."']='".$value['icon']."';\n";
	} 
	
	if (isset($this->link_result)and($this->link_result=='success')){
		echo "var link_result=true;\n";
		echo "var link_dpt_id='".$this->link_dpt_id."';\n";
		echo "var link_login_account='".$this->link_login_account."';\n";
		echo "var link_dpt_account_id='".$this->link_dpt_account_id."';\n";		
		echo "var link_msg='".$this->success_msg."';\n";		
	}else{
		echo "var link_result=false;\n";
	}
?>
	function generateForm(id){
		var area=servicearea[id];
		var create_account='';
		switch (area) {
			case '4':
				create_account_str = 'Create:<br><div style="margin:8px 0 8px 20px;"><a href="/client/index/create-dpt-account/dpt_id/'+departments[id]+'/area/advertiser" style="color:#0505FF;">Advertiser Account</a></div>\
				<div style="margin:8px 5px;">or <a href="/client/index/create-dpt-account/dpt_id/'+departments[id]+'/area/publisher" style="color:#0505FF;">Publisher Account</a></div>';
				break;
			default:
				create_account_str = '<a href="/client/index/create-dpt-account/dpt_id/'+departments[id]+'" style="color:#0505FF">Create account</a>'; 
				break;
		}
		
		$("#subsribe-dialog").html('<div style="font-size:11px;"><div style="margin:10px 0 10px 10px">If you already have an old account of '+services[id]+', Please input your account id and password to subscribe the service:</div>\
				<div class=left style="margin:10px 50px 0 10px"><ul><li id="'+id+'1"><div><a href="'+serviceurl[id]+'" style="color:#0505FF" target=_blank>'+services[id]+'</a>\
				<span></span></div></li></ul><div style="float:left;margin:2px 5px;">No account yet?<br>Please fill in your <a href="/client/profile">profile</a><br> first, then come here to<br>'+create_account_str+'</div></div>\
				<div class=left><form name="subscribe" id="subscribe" method="post" onsubmit="return checkForm();">\
				<input type=hidden name="dpt_id" id="dpt_id" value="'+departments[id]+'">\
				<label>Username or Account ID:</label><input type="text" name="account_id" id="account_id" value="" onkeyup=" $(\'#account_id_error\').hide()">\
				<label id="account_id_error" class="error" style="display:none;">Account id can not be empty</label>\
				<br><label>Password:</label><input type="password" name="password" id="password" value="" onkeyup=" $(\'#password_error\').hide()">\
				<label id="password_error" class="error" style="display:none;">Password can not be empty</label>\
				<br><input type="submit" name="submit" id="submit" value="Submit" style="margin:10px 0;">\
				</form></div></div>');
	
	}
	

	function checkForm(){
		var flag=false;
		if ($("#account_id").val()==''){
			$("#account_id_error").show();
			flag=true;
		}
		if ($("#password").val()==''){
			$("#password_error").show();
			flag=true;
		}
		if (flag) return false; else return true;
	}

	function subscribe_service(){
		var currentId  = $("#service_id").val();

		if (servicetype[ currentId ]=='like clicksor')
			generateForm(currentId);
		else
			specialForm(currentId);
		$("#subsribe-dialog").dialog("open");
	}		

	function specialForm(id){
		$("#subsribe-dialog").html('<div style="margin:10px 0 10px 10px">'+services[id]+' is a default service for YesUp Account, please confirm to subscribe:</div>\
				<div class=left style="margin:10px 50px 0 10px"><ul><li id="'+id+'1"><div><a href="'+serviceurl[id]+'" target=_blank>'+services[id]+'</a>\
				<span></span></div></li></ul></div>\
				<div class=left><form name="subscribe" id="subscribe" method="post">\
				<input type=hidden name="dpt_id" id="dpt_id" value="'+departments[id]+'">\
				<input type="text" readonly name="account_id" id="account_id" value="'+user_name+'"><br>\
				<input type="submit" name="submit" id="submit" value="Confirm" style="margin:10px 0;">\
				</form></div>');
	
	}

	function resultForm(id,login_account,dpt_account_id,msg){
		$("#subsribe-dialog").html('<div style="font-size:12px;font-weight:bold;"><div style="margin:10px 0 10px 10px">'+msg+'</div>\
				<div class=left style="margin:10px 50px 0 10px"><ul><li id="'+id+'1"><div><a href="#" onclick="toService('+departments[id]+','+dpt_account_id+',\''+user_id+'\');" style="color:#0505FF" target=_blank>'+services[id]+'</a>\
				<span></span></div></li></ul></div>\
				<div class=left>\
				<input type=hidden name="dpt_id" id="dpt_id" value="'+departments[id]+'">\
				<label>Username or Account ID:</label><b>'+login_account+'</b>\
				</div><div class="clearfix"></div><div><input type="button" value="Continue to access the account" style="margin:10px 0;" onclick="toService('+departments[id]+','+dpt_account_id+',\''+user_id+'\');">\
				<input type="button" value="Return to Dashboard" style="margin-left:30px;" onclick="closeDialog();">\
				</div></div>');
	}
	
	function toService(did,aid,cid){
		location="/client/index/to-service/did/"+did+"/aid/"+aid+"/cid/"+cid;
	}
	
	function closeDialog(){
		$("#subsribe-dialog").dialog("close");
	}
</script>


<script>
	$(function() {

		$('.noscroll').click(function(event) {
			event.preventDefault();
		});

		var h1=$('#droppable1').height();
		var h2=$('#droppable2').height();
		if (h2>h1){
			$('#droppable1').height(h2);
		}
		
		$("#subsribe-dialog").dialog({autoOpen:false,modal:true,width:560});
		$("#subsribe-dialog").bind( "dialogclose", function(event, ui){location.reload;});		
		$( "#sortable1" ).sortable();
		$( "#sortable1" ).disableSelection();
		
		$( ".draggable2" ).draggable({revert: true,  helper: 'clone' });
		$( "#droppable1" ).droppable({
			drop: function( event, ui ) {
				$( this )
				if (ui.draggable.hasClass('draggable2')){					
					var currentId = ui.draggable.attr('id');					
					if (servicetype[ currentId ]=='like clicksor')
						generateForm(currentId);
					else
						specialForm(currentId);
					$("#subsribe-dialog").dialog("open");
				}
			}
		});

		if (link_result){
			var icon=serviceicon[link_dpt_id];
			resultForm(icon,link_login_account,link_dpt_account_id,link_msg);
			$("#subsribe-dialog").dialog("open");
		}
		
	});

	function toggleCheck(id,ele1,ele2){

		if ( $("#"+ele2).html()==''){
			$(".checkmark").remove();
			$(".checked").removeClass('checked');
			$("div[id^=add_button_]").hide();
			$("#"+ele2).append('<img src="/images/Check-32.png" class="checkmark">');
			$("#"+ele1).addClass('checked');
	
			$("#service_id").val(id);
			$("#add_button_"+id).show();
			$("#web_button_"+id).show();
		}else{
			$("#"+ele2).html('');
			$("#"+ele1).removeClass('checked');
			$("#service_id").val('');
			$("#add_button_"+id).hide();
			$("#web_button_"+id).hide();
		}
		
	}

	function accountAction(id,dpt_id,dpt_account_id,client_id,login_name){
		if ($("#"+id+"_account").hasClass('opened')){
			$("#"+id+"_account").html('');
			$("#"+id+"_account").removeClass('opened');
			$("#"+id+"_account").hide();
		}else{
			$("#"+id+"_account").addClass('opened');
			$("#"+id+"_account").html('<!--div class=left><a href="/client/index/to-service/did/'+dpt_id+'/aid/'+dpt_account_id+'/cid/'+client_id+'" class="sm-btn" target=_blank><b class="ui-title">Access</b></a></div-->\
					<div class=left><a href="javascript:void();" class="sm-btn" onclick="shareAccount(\''+id+'\',\''+dpt_id+'\',\''+dpt_account_id+'\',\''+client_id+'\',\''+login_name+'\')"><b class="ui-title">Share</b></a></div>\
					<div class=left style="margin-left:10px;"><a href="javascript:void();" onclick="if (confirm(\'Are you sure to unsubsribe this account?\')) {location=\'/client/index/index/act/remove/dpt_id/'+dpt_id+'/dpt_account_id/'+dpt_account_id+'/client_id/'+client_id+'\';}" class="sm-btn"><b class="ui-title">Remove</b></a></div>\
					<div class=left style="margin-left:10px;"><a href="javascript:void();" class="sm-btn" onclick="hideAccount(\''+id+'\')"><b class="ui-title">Hide</b></a></div>\
					<div class="clearfix"></div>');
			$("#"+id+"_account").show();
		}
	}

	function hideAccount(id){
		$("#"+id+"_account").html('');
		$("#"+id+"_account").removeClass('opened');
		$("#"+id+"_account").hide();
	}

	function toggle_more(id){
/*		
		if ($("#group_"+id).css('display')=='none'){
			$("#group_"+id).show();
			$("#toggle_"+id).html("- View less");
		}else{
			$("#group_"+id).hide();
			$("#toggle_"+id).html("+ View more services of this group");
		}
*/		
		if ($("#toggle_"+id).html()=="+ View more"){
			$(".group_"+id).removeClass('hide');
			$(".group_"+id).addClass('show');
			$("#toggle_"+id).html("- View less");
		}else{
			$(".group_"+id).removeClass('show');
			$(".group_"+id).addClass('hide');
			$("#toggle_"+id).html("+ View more");
		}
	}

	function shareAccount(id,dpt_id,dpt_account_id,client_id,login_name){
		$("#subsribe-dialog").html('<div style="margin:10px 0 10px 10px">Share this account to other users.</div>\
				<div class=left style="margin:10px 50px 0 10px"><ul><li id="'+id+'1"><div><a href="/client/index/to-service/did/'+dpt_id+'/aid/'+dpt_account_id+'/cid/'+client_id+'" target=_blank>'+services[id]+' <b>'+login_name+'</b></a>\
				<span></span></div></li></ul></div>\
				<div class=left>\
				<input type=hidden name="share_dpt_id" id="share_dpt_id" value="'+dpt_id+'">\
				<input type=hidden name="share_dpt_account_id" id="share_dpt_account_id" value="'+dpt_account_id+'">\
				<input type=hidden name="client_id" id="client_id" value="'+client_id+'">\
				Share to:(account email)<br>\
				<input type="text" name="share_to" id="share_to" value=""><br>\
				<input type="button" value="Share" onclick="share();" style="margin:10px 0;">\
				</div>\<div class=clear></div>\
				<div class=left style="margin:10px 0 10px 10px">Already shared to:<br><div id="share_to_clients">None</div></div>\
				');
        $("span.ui-dialog-title").text('Share your service account to other users');		
		$("#subsribe-dialog").dialog("open");
		getShare();
		
	}
	
	function share(){
		var dpt_id=$("#share_dpt_id").val();
		var dpt_account_id=$("#share_dpt_account_id").val();
		var client_id=$("#client_id").val();
		var share_to=$("#share_to").val();
		if ((share_to=='')||(share_to==' ')){
			alert('Please input the email address to which you want to share your account.');return false;
		}
		
	    $.post("/default/do/share", {dpt_id: ""+dpt_id+"", dpt_account_id: ""+dpt_account_id+"", client_id: ""+client_id+"", share_to: ""+share_to+""}, function(data)
	   	{
            if(data['link_id']>0) {
            	//alert(data['news_content']);
            	if ($("#share_to_clients").html()=='None'){
    	    		$("#share_to_clients").html('<span>'+share_to+'</span><span style="margin-left:10px;"><a style="color:blue;" href="javascript:void();" onclick="if (confirm(\'Are you sure to remove this sharing?\')){removeShare(\''+data['client_id']+'\',\''+data['dpt_id']+'\',\''+data['dpt_account_id']+'\',\''+data['share_from']+'\');} return false;">remove</a></span>');
            	}else{
    	            var old_content=$("#share_to_clients").html();
    	            var new_content='<div class=clear></div><div><span>'+share_to+'</span><span style="margin-left:10px;"><a style="color:blue;" href="javascript:void();" onclick="if (confirm(\'Are you sure to remove this sharing?\')){removeShare(\''+data['client_id']+'\',\''+data['dpt_id']+'\',\''+data['dpt_account_id']+'\',\''+data['share_from']+'\');} return false;">remove</a></span><div>';
    	            $("#share_to_clients").html(old_content+new_content);
            	}
            }else{
    	        alert(data);
    		}
	    }, "json");
		
	}		

	function getShare(){
		var dpt_id=$("#share_dpt_id").val();
		var dpt_account_id=$("#share_dpt_account_id").val();
		var client_id=$("#client_id").val();
		
	    $.post("/default/do/get-share", {dpt_id: ""+dpt_id+"", dpt_account_id: ""+dpt_account_id+"", client_id: ""+client_id+""}, function(data)
	   	{
            if(data.length>0) {
                //alert(data['news_content']);
                if ($("#share_to_clients").html()=='None'){
    	            var old_content='';
                }else{
    	            var old_content=$("#share_to_clients").html();
                }
                var new_content='';
                for(var i=0; i<data.length; i++){
                	new_content = new_content+'<div class=clear></div><div><span>'+data[i]['email']+'</span><span style="margin-left:10px;"><a style="color:blue;" href="javascript:void();" onclick="if (confirm(\'Are you sure to remove this sharing?\')){removeShare(\''+data[i]['client_id']+'\',\''+data[i]['dpt_id']+'\',\''+data[i]['dpt_account_id']+'\',\''+data[i]['share_from']+'\');} return false;">remove</a></span><div>';
                }
                $("#share_to_clients").html(old_content+new_content);
        	}else{
        		$("#share_to_clients").html('None');
        	}
	    }, "json");
		
	}		

	function removeShare(client_id,dpt_id,dpt_account_id,share_from){
	    $.post("/default/do/remove-share", {dpt_id: ""+dpt_id+"", dpt_account_id: ""+dpt_account_id+"", client_id: ""+client_id+"", share_from: ""+share_from+""}, function(data)
	   	{
            if(data.length>0) {
            	//alert(data['news_content']);
	            var new_content='';
            	for(var i=0; i<data.length; i++){
                	new_content = new_content+'<div class=clear></div><div><span>'+data[i]['email']+'</span><span style="margin-left:10px;"><a style="color:blue;" href="javascript:void();" onclick="if (confirm(\'Are you sure to remove this sharing?\')){removeShare(\''+data[i]['client_id']+'\',\''+data[i]['dpt_id']+'\',\''+data[i]['dpt_account_id']+'\',\''+data[i]['share_from']+'\');} return false;">remove</a></span><div>';
            	}
            	$("#share_to_clients").html(new_content);
    		}else{
    			$("#share_to_clients").html('None');
    		}
	    }, "json");
		
	}		
	
</script>

<?php if (!empty($this->news)):?>
<div id="news">
	<?php echo $this->news[0]['news_content'];?>
</div>
<?php endif ?>

<?php if (!empty($this->success_msg)):?>
<div class="response-msg success ui-corner-all"><?php echo $this->success_msg;?></div>
<?php endif ?>

<?php if (!empty($this->error_msg)):?>
<div class="response-msg error ui-corner-all"><?php echo $this->error_msg;?></div>
<?php endif ?>


<div id="dashboard">

<h2>Dashboard</h2>
 
<div class="section">
<h3>The service(s) you subscribed:</h3>
<div id="drag_desc" style="margin:-20px 0 20px 0;"><span class="ui-title">Click on an account will access it directly.</span></div>

<div class="demo-frame1" id="droppable1" style="height:auto;">		

	<ul id="sortable1">
<?php if (count($this->client_services)>0):?>
	<?php 
	foreach($this->client_groups as $key => $value ){
		echo '<li style="margin:0;padding:0;"><b>Group '.$value['group_id'].': '.$value['group_name'].'</b></li>';
	
		foreach($this->client_services as $index => $item ){
			
			if ($item[0]['group_id']==$value['group_id'])
			{
				//echo '<li id="'.$item[0]['icon'].'"><a href="'.$item[0]['service_url'].'" target=_blank>'.$item[0]['dpt_name'].'<span></span></a><p>'.$item[0]['description'].'<br>Account: ';
				echo '<li id="'.$item[0]['icon'].'"><a><b>'.$item[0]['dpt_name'].'</b><span></span></a><p>'.$item[0]['description'].'<br>Account: ';
				
				foreach($item as $key => $value){
					echo '<b style="margin-left:15px;"><a href="/client/index/to-service/did/'.$value['dpt_id'].'/aid/'.$value['dpt_account_id'].'/cid/'.$value['client_id'].'" target=_blank>'.$value['dpt_account_login'].'</a></b>';
					//echo '<b style="margin-left:15px;"><a href="#" onclick="accountAction(\''.$item[0]['icon'].'\',\''.$value['dpt_id'].'\',\''.$value['dpt_account_id'].'\',\''.$value['client_id'].'\')">'.$value['dpt_account_login'].'</a></b>';
					echo '<b style="margin-left:5px;"><a href="javascript:void();" class="noscroll" style="font-size:11px;color:#333;text-decoration:none;" onclick="accountAction(\''.$item[0]['icon'].'\',\''.$value['dpt_id'].'\',\''.$value['dpt_account_id'].'\',\''.$value['client_id'].'\',\''.$value['dpt_account_login'].'\');">(<u>edit</u>)</a></b>';
				}
						
				echo '</p>';
				echo '<div id="'.$item[0]['icon'].'_account" style="display:none;margin:10px 0;"></div>';
				echo '</li>';
			}
		}
		
	}
	?>	
<?php else: ?>
	<li>You don't have any services right now.</li>
<?php endif ?>
	</ul>

</div>
 
</div>


<div class="section">
<div style="margin-left:50px;">
<h3>All YesUp services for subscription:</h3>
<div id="drag_desc" style="margin:-20px 0 20px 0;"><span class="ui-title">Drag the icon from right to left or click on it to subsribe the service.</span></div>

<div class="demo-frame1" id="droppable2">		

	<ul>

	<?php 
	foreach($this->all_groups as $key => $value ){
		echo '<li style="margin:0;padding:0;"><b>Group '.$value['group_id'].': '.$value['group_name'].'</b></li>';
	
		$group_items=0;
		$more_flag=false;
		foreach($this->all_services as $index => $item ){
			if ($item['group_id']==$value['group_id']){			
				$group_items++;
				
				$group_class = "";
				//if (($group_items>2)and(!$more_flag)){
				if ($group_items>2){
					$more_flag=true;
					$group_class = "group_".$value['group_id']." hide";
					//echo '<div id="group_'.$value['group_id'].'" style="display:none;">';
				}
				
				echo '<li id="'.$item['icon'].'" class="draggable2 '.$group_class.'"><div id="'.$item['icon'].'_div" class="noscroll" onclick="toggleCheck(\''.$item['icon'].'\',\''.$item['icon'].'_div\',\''.$item['icon'].'_span\');"><a href="#">'.$item['dpt_name'].'</a><span id="'.$item['icon'].'_span"></span>-<b>'.$item['title'].'</b><p>'.$item['description'].'.</p></div></li>';
				echo '<div id="add_button_'.$item['icon'].'" style="margin:10px 0 10px 50px;display:none;">';
				echo '<div class=left><a href="#" class="btn" onclick="subscribe_service();"><b class="ui-title">Subscribe</b></a></div>';
				echo '<div class=left style="margin:0 0 10px 10px;"><a href="'.$item['service_url'].'" class="btn" target=_blank><b class="ui-title" style="font-size:10px;">Learn More</b></a></div>';
				echo '</div>';
				echo '<div class="clearfix"></div>';
			}
		}
		
		if ($more_flag){
			//echo '</div><div id="toggle_'.$value['group_id'].'" onclick="toggle_more(\''.$value['group_id'].'\');" style="font-weight:bold;margin:0 0 20px 50px;cursor:pointer;">+ View more services of this group</div>';
			echo '<li id="toggle_'.$value['group_id'].'" onclick="toggle_more(\''.$value['group_id'].'\');" style="font-weight:bold;margin:0;cursor:pointer;">+ View more</li>';
		}
	
		
	}
	?>
	</ul>

</div>
 </div>
 
</div>


<input type=hidden name=service_id id=service_id value=''>

<div id="subsribe-dialog" title="Subscribe service to your center account" style="display:none;" >
</div>


</div>
 
